<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uniapp Vue3 订单确认弹窗</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #121212;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        /* 弹窗容器样式 */
        .popup-container {
            background-color: #1e1e1e;
            border-radius: 12px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            position: relative;
        }
        
        /* 弹窗头部 */
        .popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #333;
        }
        
        .popup-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .close-btn {
            background: none;
            border: none;
            color: #999;
            font-size: 20px;
            cursor: pointer;
            transition: color 0.3s;
        }
        
        .close-btn:hover {
            color: #fff;
        }
        
        /* 弹窗内容 */
        .popup-content {
            padding: 20px;
            padding-bottom: 30px;
        }
        
        .section-title {
            font-size: 16px;
            color: #ccc;
            margin-bottom: 12px;
        }
        
        .scroll-container {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            padding: 5px 0 15px 0;
            scrollbar-width: thin;
            scrollbar-color: #333 #1e1e1e;
            position: relative;
        }
        
        .scroll-container::-webkit-scrollbar {
            height: 5px;
        }
        
        .scroll-container::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 10px;
        }
        
        /* 有效期选项 */
        .validity-item {
            flex: 0 0 auto;
            width: 120px;
            background-color: #252525;
            border-radius: 8px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            border: 1px solid transparent;
            transition: border-color 0.3s;
        }
        
        .validity-item.selected {
            border-color: #3a6b9e;
        }
        
        .selected-badge {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-top: 25px solid #ffc107;
            border-right: 25px solid transparent;
        }
        
        .selected-badge i {
            position: absolute;
            top: -22px;
            left: 3px;
            color: #000;
            font-size: 12px;
        }
        
        .settlement-time {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }
        
        .minutes {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .profit {
            background-color: #3a6b9e;
            color: #fff;
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 4px;
            width: 100%;
            text-align: center;
        }
        
        /* 投资金额部分 */
        .amount-scroll-container {
            display: flex;
            overflow-x: auto;
            gap: 12px;
            padding: 5px 80px 15px 0;
            scrollbar-width: thin;
            scrollbar-color: #333 #1e1e1e;
            position: relative;
        }
        
        .amount-scroll-container::-webkit-scrollbar {
            height: 5px;
        }
        
        .amount-scroll-container::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 10px;
        }
        
        .amount-item {
            flex: 0 0 auto;
            width: 80px;
            height: 40px;
            background-color: #252525;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .amount-item:hover, .amount-item.active {
            background-color: #333;
            border: 1px solid #3a6b9e;
        }
        
        .custom-amount-container {
            position: absolute;
            right: 0;
            top: 0;
            width: 80px;
            height: 40px;
        }
        
        .custom-amount {
            background-color: #252525;
            border: 1px solid transparent;
            border-radius: 8px;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            transition: border-color 0.3s;
        }
        
        .custom-amount.focused {
            border-color: #3a6b9e;
        }
        
        .custom-amount input {
            background: transparent;
            border: none;
            color: #fff;
            width: 100%;
            text-align: center;
            outline: none;
            font-size: 14px;
        }
        
        .custom-amount input::placeholder {
            color: #999;
        }
        
        /* 余额和分隔线 */
        .balance {
            font-size: 14px;
            color: #ccc;
            margin: 15px 0;
            text-align: right;
        }
        
        .divider {
            height: 1px;
            background-color: #333;
            margin: 15px 0;
        }
        
        /* 订单表格 */
        .order-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            margin-bottom: 25px;
        }
        
        .order-table th {
            text-align: left;
            padding: 8px 5px;
            font-size: 14px;
            color: #999;
            font-weight: normal;
        }
        
        .order-table td {
            padding: 8px 5px;
            font-size: 14px;
        }
        
        .direction-up {
            color: #0cb785;
            font-weight: 600;
        }
        
        /* 确认按钮 */
        .confirm-btn {
            display: block;
            width: 80%;
            margin: 0 auto;
            background-color: #3a6b9e;
            color: white;
            border: none;
            border-radius: 25px;
            padding: 14px 0;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .confirm-btn:hover {
            background-color: #2c5282;
        }
        
        /* 响应式设计 */
        @media (max-width: 380px) {
            .validity-item {
                width: 110px;
            }
            
            .amount-item {
                width: 70px;
            }
            
            .custom-amount-container {
                width: 70px;
            }
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <script>
        const { createApp, ref } = Vue;
        
        const App = {
            setup() {
                // 响应式数据
                const selectedValidityIndex = ref(0);
                const selectedAmountIndex = ref(2);
                const customAmountFocused = ref(false);
                
                // 有效期选项
                const validityOptions = ref([
                    { time: '1分', profit: '85%' },
                    { time: '3分', profit: '90%' },
                    { time: '5分', profit: '95%' }
                ]);
                
                // 投资金额选项
                const amountOptions = ref(['¥1000', '¥2000', '¥5000', '¥10000']);
                
                // 选择有效期
                const selectValidity = (index) => {
                    selectedValidityIndex.value = index;
                };
                
                // 选择投资金额
                const selectAmount = (index) => {
                    selectedAmountIndex.value = index;
                    customAmountFocused.value = false;
                };
                
                // 自定义金额获取焦点
                const focusCustomAmount = () => {
                    customAmountFocused.value = true;
                    selectedAmountIndex.value = -1;
                };
                
                // 自定义金额失去焦点
                const blurCustomAmount = () => {
                    customAmountFocused.value = false;
                };
                
                // 确认订单
                const confirmOrder = () => {
                    alert('订单已确认！');
                };
                
                // 关闭弹窗
                const closePopup = () => {
                    alert('关闭弹窗');
                };
                
                return {
                    selectedValidityIndex,
                    selectedAmountIndex,
                    customAmountFocused,
                    validityOptions,
                    amountOptions,
                    selectValidity,
                    selectAmount,
                    focusCustomAmount,
                    blurCustomAmount,
                    confirmOrder,
                    closePopup
                };
            },
            template: `
                <view class="popup-container">
                    <view class="popup-header">
                        <text class="popup-title">订单确认</text>
                        <button class="close-btn" @click="closePopup">
                            <i class="fas fa-times"></i>
                        </button>
                    </view>
                    
                    <view class="popup-content">
                        <text class="section-title">有效期</text>
                        <view class="scroll-container">
                            <view 
                                v-for="(option, index) in validityOptions" 
                                :key="index"
                                :class="['validity-item', selectedValidityIndex === index ? 'selected' : '']"
                                @click="selectValidity(index)"
                            >
                                <view class="selected-badge" v-if="selectedValidityIndex === index">
                                    <i class="fas fa-check"></i>
                                </view>
                                <text class="settlement-time">结算时间</text>
                                <text class="minutes">{{ option.time }}</text>
                                <view class="profit">收益{{ option.profit }}</view>
                            </view>
                        </view>
                        
                        <text class="section-title">投资金额</text>
                        <view class="amount-scroll-container">
                            <view 
                                v-for="(amount, index) in amountOptions" 
                                :key="index"
                                :class="['amount-item', selectedAmountIndex === index ? 'active' : '']"
                                @click="selectAmount(index)"
                            >
                                {{ amount }}
                            </view>
                            
                            <view class="custom-amount-container">
                                <view :class="['custom-amount', customAmountFocused ? 'focused' : '']">
                                    <input 
                                        type="text" 
                                        placeholder="其他金额"
                                        @focus="focusCustomAmount"
                                        @blur="blurCustomAmount"
                                    >
                                </view>
                            </view>
                        </view>
                        
                        <view class="balance">余额: ¥1592143.00</view>
                        
                        <view class="divider"></view>
                        
                        <table class="order-table">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>方向</th>
                                    <th>现价</th>
                                    <th>金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>USD/JPY</td>
                                    <td class="direction-up">买涨</td>
                                    <td>541.5997</td>
                                    <td>¥10000</td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <button class="confirm-btn" @click="confirmOrder">确认订单</button>
                    </view>
                </view>
            `
        };
        
        createApp(App).mount('#app');
    </script>
</body>
</html>